import React from 'react'
import styled, { StyleSheetManager } from 'styled-components'
import stylisRTLPlugin from 'stylis-plugin-rtl';

const Box = styled.div`
  color: ${props => props.theme.color};
  display: flex;
  border-left: 10px solid red;
`;

export default () => (
  <>
    <StyleSheetManager disableVendorPrefixes>
      <Box>If you inspect me, there are no vendor prefixes for the flexbox style.</Box>
    </StyleSheetManager>
    <StyleSheetManager>
      <Box>Neither do I! emmm y this happen</Box>
    </StyleSheetManager>
    <StyleSheetManager stylisPlugins={[stylisRTLPlugin]}>
      <Box>My border is now on the right!</Box>
    </StyleSheetManager>
  </>
);
